import Taro, { getCurrentInstance } from '@tarojs/taro';
import { View, Icon } from '@tarojs/components';
import { AtButton, AtMessage } from 'taro-ui';
import { useState, useEffect } from 'react';
import "taro-ui/dist/style/components/timeline.scss";
import "taro-ui/dist/style/components/icon.scss";

import Header from '@/components/header';
import Return from '@/components/Return';
import { getTransferProgress, getTransferDetail } from '@/api/application/campustransfer';
import css from './index.module.less';
import "./index.less";

export default function ProgressQuery() {
  //转组织申请id
  const applicationId = getCurrentInstance().router.params.id;
  //是否已有申请
  const isApplying = getCurrentInstance().router.params.isApplying;
  //时间轴html
  const [timeLineHtml, setTimeLineHtml] = useState([]);
  //时间轴标题信息
  const titleInfo = [
    "转组织申请书",
    "当前所在党支部管理人员审核",
    "移交党支部管理人员审核"
  ];
  //所用到的图标信息
  const iconInfo = [
    { type: 'success', size: '60rpx' },
    { type: 'waiting', size: '60rpx', color: 'rgb(255,116,42)' },
    { type: 'success', size: '60rpx', color: 'rgb(220,220,220)' },
    { type: 'warn', size: '60rpx' },
    { type: 'success', size: '60rpx' }
  ];
  //css样式
  const lineStyle = [css.line1, css.line2, css.line3];
  //重新提交按钮样式
  const [reAppBtnStyle, setReAppBtnStyle] = useState('none');

  useEffect(() => {
    getTransferProgress(applicationId).then(res => {
      if (res.code === 200) {
        const { applicationDate, originOrgApprovalDate, targetOrgApprovalDate, progress, state } = res.data;
        const dateInfo = [
          applicationDate, originOrgApprovalDate, targetOrgApprovalDate
        ];
        const temp = [];
        let icon = {};
        for (let i = 0; i < 3; i++) {
          let className = '';
          const date = dateInfo[i] === null ? '' : dateInfo[i];
          if (i < progress) icon = iconInfo[0];
          else if (i === progress) {
            if (state === 0) icon = iconInfo[3];
            else if (state === 1) icon = iconInfo[0];
            else if (state === 2) icon = iconInfo[1];
            className = css.active;
          }
          else if (i > progress) icon = iconInfo[2];
          temp.push(
            <View className={`${css.stpe} ${lineStyle[i]} ${className}`}>
              <View className={css.icon}>
                <Icon {...icon}></Icon>
              </View>
              <View className={css.content}>
                <View className={css.title}>
                  {titleInfo[i]}
                </View>
                <View className={css.extraText}>
                  {date}
                </View>
              </View>
            </View>
          );
        }
        icon = iconInfo[2];
        let approval = '';
        if (state === 0) {
          approval = "审核未通过";
          setReAppBtnStyle("flex");
        }
        else if (progress === 3) {
          approval = "审核通过";
          icon = iconInfo[4];
        }
        else approval = "审核中";
        temp.push(
          <View className={`${css.stpe}`}>
            <View className={css.icon}>
              <Icon {...icon}></Icon>
            </View>
            <View className={css.content}>
              <View className={css.title}>
                {approval}
              </View>
              <View className={css.extraText}>
              </View>
            </View>
          </View>
        );
        setTimeLineHtml(temp);
      }
    });
  }, []);

  const reApplication = () => {
    if (isApplying === 'false') {
      getTransferDetail(applicationId).then(res => {
        if (res.code === 200) {
          const userInfo = {
            name: res.data.userName,
            organizationId: res.data.originOrganizationId,
            organizationName: res.data.originOrganization,
            sex: res.data.userSex === "男" ? 0 : 1,
            studentJobNumber: res.data.userNumber,
          };
          Taro.navigateTo({ url: `../newCampTrans/index?userInfo=${JSON.stringify(userInfo)}` });
        }
      });
    }
    else {
      Taro.atMessage({
        'message': '当前账号已有申请正在审批中, 请耐心等待审批完成',
        'type': 'warning',
        'duration': 1000
      });
    }
  };

  return (
    <View className={css.home}>
      <Header message='转组织申请进度' left='140px' />
      <Return />
      <AtMessage />
      <View className={css.timeLine}>
        {timeLineHtml}
      </View>
      <View className={css.reAppBtn} style={{ display: reAppBtnStyle }}>
        <AtButton
          className={css.btn}
          type='primary'
          circle
          onClick={reApplication}
        >
          重新申请
        </AtButton>
      </View>
    </View>
  );
}